<template>
  <div class="collect">
    <!-- 头部 -->
    <NavigationBar title="收藏"></NavigationBar>
    <div class="content" v-if="goodsList.length>0">
      <div class="item" v-for="(item,index) in goodsList" :key="index"
           @click="$router.push({name:'details',params:{id:item.goods_id}})">
        <div class="left">
          <img :src="item.img" alt="">
        </div>

        <div class="right">
          <div class="name">{{ item.name }}</div>
          <div class="price">￥{{ item.price }}</div>
        </div>
        <!-- 删除 -->
        <div class="cross" @click.stop="del(item.id)"></div>
      </div>
    </div>

    <van-empty
      v-else
      class="custom-image"
      description="您还没有收藏商品"
    >
      <template #image>
        <van-icon name="star-o"/>
      </template>
    </van-empty>
  </div>
</template>

<script>
export default {
  name: "Collect",
  data() {
    return {
      // collectList: [],
      goodsList: [],
    }
  },
// 侦听器
  watch: {},
// 计算属性
  computed: {},
// 事件
  methods: {
    del(id) {
      this.$ajax.delCollect(id).then(res => {
        this.getCollect()
      })
    },
    getCollect() {
      this.goodsList = []
      this.$ajax.getCollect({
        phone: this.vuexUserInfo.user.mobile,
      }).then(res => {
        // this.collectList = res
        res.forEach(item => {
          this.$ajax.detailsData({product: item.goods_id}).then(goods => {
            // console.log(goods.product)
            this.goodsList.push({
              id: item.id,
              goods_id: item.goods_id,
              name: goods.product.name,
              price: goods.product.current_price,
              img: "https://files.roborock.com/uploadImages/" + goods.product.default_photo
            })
          })
        })
        // console.log(res)
      })
    }
  },
// 生命周期
  created() {
  },
  mounted() {
    this.getCollect()
  }
}
</script>

<style lang="scss" scoped>
.collect {
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 10px 60px;

    .item {
      padding: 15px 10px 15px;
      box-sizing: border-box;
      position: relative;
      background-color: #fff;
      margin-bottom: 15px;
      border-radius: 14px;
      display: flex;

      .left {
        width: 110px;
        height: 76px;

        img {
          height: 100%;
          margin: 0 auto;
        }
      }


      .right {
        width: 60%;
        padding-left: 20px;

        .name {
          width: 100%;
          color: #4a4a4a;
          font-size: 14px;
          margin-bottom: 5px;
          //padding-right: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .price {
          color: #72b4fe;
          font-size: 14px;
          margin-top: 20px;
        }

        .stepper {
          margin-top: 10px;
          display: flex;

          .btn {
            display: inline-block;
            width: 40px;
            height: 26px;
            border-radius: 13px;
            text-align: center;
            line-height: 26px;
            color: black;
            border: 1px solid #ccc;
            background-color: transparent;
            font-size: 18.75px;
            padding: 0;
            box-sizing: content-box;
          }

          input {
            font-size: 16px;
            width: 50px;
            flex: none;
            display: inline;
            color: #000;
            border: 0;
            background-color: transparent;
            text-align: center;
            font-weight: normal;
          }
        }
      }

      .cross {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 25px;
        height: 25px;
        background: url(https://files.roborock.com/mini_img/cart/delete.png) 50% no-repeat;
        background-size: 100% auto;
      }
    }
  }

  ::v-deep.custom-image .van-empty__image {
    margin-top: 100px;
    width: 93px;
    height: 93px;
    font-size: 93px;
    line-height: 93px;
    font-weight: bold;
  }
}
</style>